<template>
    <el-card class="contract_person_card_container" :class="{ show_default: showDefault }">
        <div slot="header" class="card_header">
            <div class="card_header_item">
                <div class="title" v-if="rwDispatcherState === 'read'">
                    <i class="fa fa-user-circle mr5"></i>
                    <span>{{ formData.name }}</span>
                </div>
                <el-switch v-if="rwDispatcherState === 'read' && showDefault"
                           v-model="formData.is_default"
                           active-color="#13ce66"
                           @change="changeDefaultValue" />
            </div>
            <div class="card_header_item">
                <div class="btn_item" v-show="rwDispatcherState === 'write'">
                    <el-button type="text" @click="handleCancel">取 消</el-button>
                    <el-button type="text" @click="handleConfirm" v-btnLoading>确 定</el-button>
                </div>
                <div class="btn_item" v-show="rwDispatcherState === 'read'">
                    <el-button type="text" icon="fa fa-trash-o" @click="handleDel" />
                    <el-button type="text" icon="fa fa-pencil" @click="switchState2Write" />
                </div>
            </div>
        </div>
        <el-form ref="contractPersonCardForm" :model="formData" :rules="rules"
                 label-width="60px" v-enterToNext>
            <el-form-item label="姓名" prop="name" v-show="rwDispatcherState === 'write'">
                <el-input-dispatcher v-model="formData.name" clearable />
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input-dispatcher v-model="formData.phone" clearable />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input-dispatcher v-model="formData.email" clearable />
            </el-form-item>
            <el-form-item label="QQ" prop="qq">
                <el-input-dispatcher v-model="formData.qq" clearable />
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { checkEmail } from "@common/utils/validate";

export default {
    name: "ContractPersonCard",
    props: {
        showDefault: {
            type: Boolean,
            default: false,
        },
        data: Object,
    },
    provide() {
        return {
            rwDispatcherProvider: this,
        };
    },
    data() {
        return {
            rwDispatcherState: 'read',
            rules: {
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                    //目前只兼容中文、大小写英文、数字
                    {
                        // pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,50}$/,
                        // message:
                        //   "最大 50 位大小写英文、数字或者其它地区语言字符，不能包含特殊字符",
                        max: 50,
                        message: "最大 50 位字符，内容过长，请删减",
                        trigger: "blur",
                    },
                ],
                phone: [
                    // {
                    //   validator: checkTelOrPhone,
                    //   message: "电话格式错误，请重新输入",
                    //   trigger: "blur",
                    // },
                ],
                email: [
                    {
                        validator: checkEmail,
                        message: "邮箱格式错误，请重新输入",
                        trigger: "blur",
                    },
                ],
            },
            formData: {},
        };
    },
    watch: {
        data: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            _this.formData = $.extend({}, this.data || {});
            if (!_this.$utils.isNotEmpty(_this.formData.sid)) {
                _this.rwDispatcherState = 'write';
            }
        },
        handleDel() {
            const _this = this;
            _this.$confirm("确定删除联系人吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                _this.fetchData(_this.$api.API_DeleteSysContractPerson, {
                    id: _this.formData.id,
                }).then(() => {
                    _this.$message.success("删除成功！");
                    if (_this.formData.is_default) {
                        _this.changeDefaultValue(false, true);
                    } else {
                        _this.$emit('event', { type: 'refresh' });
                    }
                    return true;
                }).catch(() => {
                    return false;
                });
            }).catch(() => {
            });
        },
        switchState2Write() {
            this.rwDispatcherState = 'write';
        },
        changeDefaultValue(value, del_default) {
            this.formData = $.extend({}, this.formData, {
                is_default: value,
            });
            this.$emit('event', {
                type: 'setDefault',
                data: this.formData,
                del_default,
            });
        },
        handleCancel() {
            const _this = this;
            _this.rwDispatcherState = 'read';
            if (!_this.$utils.isNotEmpty(_this.formData.sid)) {
                _this.$emit('event', {
                    type: 'del',
                    data: _this.formData
                });
            } else {
                _this.formData = $.extend({}, this.data || {});
            }
        },
        async handleConfirm() {
            const _this = this;
            let valid = await _this.validateForm('contractPersonCardForm');
            if (valid) {
                let subData = $.extend({}, _this.formData);
                return _this.fetchData(_this.$api.API_SaveSysContractPerson, subData).then(() => {
                    _this.$message.success("保存成功！");
                    _this.$emit('event', { type: 'refresh' });
                    _this.rwDispatcherState = 'read';
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.contract_person_card_container {
    margin-bottom: 10px;
    width: 100%;

    .card_header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card_header_item {
            display: flex;
            align-items: center;

            .title {
                margin-right: 10px;
            }
        }
    }

    &.show_default {
        width: calc(50% - 5px);
    }
}
</style>
